import React, {
    Component
} from "react"

import {
    StyleSheet,
    Text
} from "react-native"

import {
    connect
} from "react-redux"

import * as action from "./action"

export class Weather extends Component {
    static propTypes = {
        weatherCondition: React.PropTypes.object.isRequired,
        fetchWeatherCondition: React.PropTypes.func.isRequired
    };

    render() {
        let weatherConditionText

        if (this.props.weatherCondition.weather === undefined) {
            if ((this.props.weatherCondition.cod !== undefined && this.props.weatherCondition.cod !== 200) ||
                this.props.weatherCondition.error !== undefined) {
                weatherConditionText = 'Error Fetching Weather Condition'
            } else {
                this.props.fetchWeatherCondition()
                weatherConditionText = 'Fetching Weather Condition'
            }
        } else {
            weatherConditionText = 'Current Temperature in ' + this.props.weatherCondition.name + ' is ' + this.props.weatherCondition.main.temp + '°C'
        }

        return (
            <Text style={style.text}>
                {weatherConditionText}
            </Text>
        )
    }
}

const style = StyleSheet.create({
    text: {
        fontSize: 17,
        marginBottom: 16,
        textAlign: 'center'
    }
});

const mapStateToProps = state => {
    return {
        weatherCondition: state.getIn(['weather', 'displayWeatherCondition'])
    }
}

export default connect(mapStateToProps, action)(Weather)
